<template>
  <div class="warp container">
  	<div class="header">
      <div class="return-icon" @click="back()"></div>
      <div class="name">今日主编推荐</div>
      <router-link :to="{path:'/search'}" class="search-icon"></router-link>
    </div>


    <div class="book-list">
    	<router-link :to="{path:'/bookdetails/'+item.id}" v-for="item in list">
            <div class="layout1-box">
              <img :src="item.cover ? item.cover : errorBookDefaultImg" class="item-l" :onerror="errorBookDefaultImg">
              <div class="item-r">
                  <h3 class="item-tt">{{item.title}}</h3>
                  <p class="item-desc">{{item.intro}}</p>
                  <p class="item-info">
                    <span>{{item.author}}</span>
                    <span class="label">
                      <i class="blue" v-for="label in item.label">{{label}}</i>
                      <i class="green">标签</i>
                    </span>
                  </p>
              </div>
            </div>
        </router-link>
    </div>

    <!-- 底部 -->
    <web-footer active="home"></web-footer>
  </div>
</template>
<script>
    import bookDefaultImg from '@/assets/images/book.png';
    import WebFooter from '../PUBLIC/footer.vue';
    export default {
    	name: 'recommend',
    	components: {
    		WebFooter
	    },
    	data () {
      		return {
      			list:[],
            errorBookDefaultImg:'this.src="' + bookDefaultImg + '"',
	      	}
	    },
      created(){
        this.$axios.get(this.$store.state.url+"recommend_today?device_sn="+this.$store.state.device).then(res=>{
          console.log(res.data);
          this.list = res.data.list;
        });
      },
	    mounted(){

	    },
	    methods:{
	      	back(){
	        	this.$router.go('-1')
	      	},
          menuToggle(){
            this.menuShow = !this.menuShow;
          }
	    }
  	}
</script>
<style lang="scss" scoped>
	.book-list{
		padding:30px 30px 30px;
		a{
			display: block;
			margin-bottom:50px;
		}
	}
</style>
